<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import {UPLOADER} from '@t/utils'
export default {
	name: 'Editorbar',
	data() {
		return {
			editor: null,
			info_: null,
			UPLOADER,
		}
	},
	model: {
		prop: 'value',
		event: 'change',
	},
	props: {
		value: {
			type: String,
			default: '',
		},
		isClear: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		isClear(val) {
			// 触发清除文本域内容
			if (val) {
				this.editor.txt.clear()
				this.info_ = null
			}
		},
		value(val) {
			// 使用 v-model 时,设置初始值
			this.editor.txt.html(val)
		},
	},
	mounted() {
		this.seteditor()
		this.editor.config.customUploadInit = this.UPLOADER(this.editor).init()
	},
	methods: {
		seteditor() {
			this.editor = new E(this.$refs.toolbar, this.$refs.editor)
			// 配置菜单
			this.editor.customConfig.menus = [
				'head', // 标题
				'bold', // 粗体
				'fontSize', // 字号
				'fontName', // 字体
				'italic', // 斜体
				'underline', // 下划线
				'strikeThrough', // 删除线
				'foreColor', // 文字颜色
				'backColor', // 背景颜色
				'link', // 插入链接
				'list', // 列表
				'justify', // 对齐方式
				'quote', // 引用
				'emoticon', // 表情
				'image', // 插入图片
				'table', // 表格
				// 'video', // 插入视频
				'code', // 插入代码
				'undo', // 撤销
				'redo', // 重复
			]

			this.editor.customConfig.onchange = html => {
				this.info_ = html // 绑定当前逐渐地值
				this.$emit('change', this.info_) // 将内容同步到父组件中
			}

			// 创建富文本编辑器
			this.editor.create()
		},
	},
}
</script>

<style lang="css">
.editor {
	width: 80%;
	margin: 0 auto;
}
.toolbar {
	border: 1px solid #ccc;
}
.text {
	border: 1px solid #ccc;
	height: 500px;
}
</style>